<template>
  <fieldset>
    <legend>可更改信息表</legend>
    <p v-for="(v, k, index) in userInfo" :key="index">
      <label>{{ k }}</label>
      :
      <input
        type="text"
        v-model="val"
        ref="ipt"
        @blur="esc(k)"
        v-if="isShow && index === selectedIndex"
      />
      <span @dblclick="conceal(v, index)" v-else>{{ v }}</span>
    </p>
  </fieldset>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
      val: "",
      selectedIndex: "",
      userInfo: {
        姓名: "马西梅",
        年龄: 18,
        爱好: "夏洛",
        身高: "150cm",
      },
    };
  },
  methods: {
    conceal(v, index) {
      this.isShow = true;
      this.selectedIndex = index;
      this.val = v;
      this.$nextTick(() => {
        //$nextTick获取更新之后的dom
        //   console.log(this.$refs.ipt[0].focus();
        this.$refs.ipt[0].focus();
      });
    },
    esc(k) {
      this.isShow = false; //让span标签显示出来
      this.userInfo[k] = this.val;
    },
  },
};
</script>

<style scoped>
span {
  border-bottom: 1px solid black;
  width: 100px;
  display: inline-block;
  text-align: center;
}

input {
  outline: 0;
  border: 0;
  border-bottom: 1px solid black;
  width: 100px;
  font-size: 16px;
  text-align: center;
}
</style>
